<template>
  <div>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <h4>用户概览</h4>
    </div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>用户信息</span>
        <div class="table-layout">
          <el-row>

            <el-col :span="20">
              <el-row>
                <el-col :span="4" class="table-cell-title">
                  用户账户
                </el-col>
                <el-col :span="8" class="table-cell">
                  {{ userInfo.user.username }}
                </el-col>
                <el-col :span="4" class="table-cell-title">
                  用户昵称
                </el-col>
                <el-col :span="8" class="table-cell">
                  {{ userInfo.user.nickname }}
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="20">
              <el-row>
                <el-col :span="4" class="table-cell-title">
                  性别
                </el-col>
                <el-col :span="8" class="table-cell">
                  {{ genderDic[userInfo.user.gender] }}&nbsp;
                </el-col>
                <el-col :span="4" class="table-cell-title">
                  邮箱
                </el-col>
                <el-col :span="8" class="table-cell">
                  &nbsp{{ userInfo.user.email || $t('未绑定') }}
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="20">
              <el-row>
                <el-col :span="4" class="table-cell-title">
                  生日
                </el-col>
                <el-col :span="8" class="table-cell">
                  {{ userInfo.user.birthday || $t('未绑定') }}&nbsp;
                </el-col>
                <el-col :span="4" class="table-cell-title">
                  注册时间
                </el-col>
                <el-col :span="8" class="table-cell">
                  {{ userInfo.user.addTime }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span>账户详情</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="3" class="table-cell-title">账户余额</el-col>
          <el-col :span="3" class="table-cell-title">{{$t('礼物卡余额')}}</el-col>
          <el-col :span="3" class="table-cell-title">{{$t('订单总消费金额')}}</el-col>
          <el-col :span="3" class="table-cell-title">订单数量</el-col>
          <el-col :span="3" class="table-cell-title">可用积分</el-col>
          <el-col :span="3" class="table-cell-title">优惠券</el-col>
          <el-col :span="3" class="table-cell-title">{{$t('总充值')}}</el-col>
          <el-col :span="3" class="table-cell-title">{{$t('总消费')}}</el-col>
          <!--<el-col :span="4" class="table-cell-title">登录次数</el-col>-->
        </el-row>
        <el-row>
          <el-col :span="3" class="table-cell">$ {{ userInfo.user.availableAmount }}</el-col>
          <el-col :span="3" class="table-cell">$ {{ userInfo.cardBalance }}</el-col>
          <el-col :span="3" class="table-cell">$ {{ userInfo.orderActualPrice }}</el-col>
          <el-col :span="3" class="table-cell">{{ userInfo.orders }}</el-col>
          <el-col :span="3" class="table-cell">{{ userInfo.user.points }}</el-col>
          <el-col :span="3" class="table-cell">{{ userInfo.couponCount }}</el-col>
          <el-col :span="3" class="table-cell">$ {{ userInfo.topup }}</el-col>
          <el-col :span="3" class="table-cell">$ {{ userInfo.expend }}</el-col>
          <!--          <el-col :span="4" class="table-cell">10</el-col>-->
        </el-row>
      </div>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{ $t('Receiving_Address') }}</span>
      </div>
      <!-- 查询结果 -->
      <el-table :data="userInfo.addressList" border fit highlight-current-row>
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column align="center" width="100px" label="地址ID" prop="id" sortable />
        <el-table-column align="center" min-width="100px" :label="$t('Member_ID')" prop="userId" />
        <el-table-column align="center" min-width="100px" label="收货人名称" prop="name" />
        <el-table-column align="center" min-width="100px" :label="$t('Cellphone_number')" prop="tel" />
        <el-table-column align="center" :label="$t('单元（非必填）')" prop="county" />
        <el-table-column align="center" min-width="300px" label="详细地址" prop="addressDetail" />
        <el-table-column align="center"  :label="$t('城市')" prop="city" />
        <el-table-column align="center"  :label="$t('省份')" prop="province" />
        <el-table-column align="center"  :label="$t('邮编')" prop="postalCode" />
        <el-table-column align="center"  :label="$t('国家')" prop="country" />


        <!-- <el-table-column align="center" min-width="300px" label="区域地址">
          <template slot-scope="scope">
            {{ scope.row.province + scope.row.city + scope.row.county }}
          </template>
        </el-table-column> -->

        <el-table-column align="center" min-width="80px" label="默认" prop="isDefault">
          <template slot-scope="scope">
            {{ scope.row.isDefault ? '是' : '否' }}
          </template>
        </el-table-column>

      </el-table>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{$t('订单记录')}}</span>
      </div>
      <!-- <div class="clearfix" style="margin:10px 0;">
        <el-input :placeholder="$t('搜索订单编号')" v-model="listOrderQuery.orderSn" style="width:200px;" clearable>
        </el-input>
        <el-button type="primary" @click="getOrderList">搜索</el-button>
      </div> -->
      <el-table v-loading="listOrderLoading" :data="orderList" border fit highlight-current-row>
        <el-table-column type="index" :index="getOrderIndex" width="50"></el-table-column>
        <el-table-column align="center" min-width="100" :label="$t('Order_ID')" prop="orderSn" />
        <el-table-column align="center" min-width="100" :label="$t('Store')" prop="shopName">
        <template slot-scope="scope">
          <el-tag effect="dark">{{ scope.row.shopName?scope.row.shopName:'非门店商品下单 [付费会员]' }}</el-tag>
        </template>
        </el-table-column>
        <el-table-column align="center" min-width="100" :label="$t('提交时间')" prop="addTime" />
        <el-table-column align="center" :label="$t('Payment_method')" prop="payType">
          <template slot-scope="scope">
            {{ payTypeFilter(scope.row.payType) }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('Source_of_order')" prop="orderSource">
          <template slot-scope="scope">
            {{ orderSourceFilter(scope.row.orderSource) }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('Order_status')" prop="orderStatus">
          <template slot-scope="scope">
            <el-tag :type="scope.row.orderStatus==401||scope.row.orderStatus==402?'success':''" effect="dark">{{ orderStatusFilter(scope.row.orderStatus) }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" :label="$t('Operate')" width="200" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button icon="el-icon-s-order" type="primary" size="mini" @click="handleDetail(scope.row)">{{ $t('Details') }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="orderTotal > 0" :total="orderTotal" :page.sync="listOrderQuery.page"
        :limit.sync="listOrderQuery.limit" @pagination="getOrderList" />
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{ $t('余额积分明细') }}</span>
        <el-tag type="danger" style="float: right;margin-left: 10px">{{ $t('总退款') }}: {{ statistics.totalRefund }}$</el-tag>
        <el-tag type="success" style="float: right;margin-left: 10px">{{ $t('总充值') }}: {{ statistics.totalSaving }}$</el-tag>
        <el-tag type="warning" style="float: right;margin-left: 10px">{{ $t('总消费') }}: {{ statistics.totalConsume }}$</el-tag>
        <el-tag  style="float: right;margin-left: 10px">{{ $t('余额') }}: {{ statistics.totalBalance }}$</el-tag>
      </div>

      <!-- 查询结果 -->
      <el-table v-loading="listBillLoading" :data="billList" :element-loading-text="$t('Searching')" border fit
        highlight-current-row>
        <el-table-column type="index" :index="getBillIndex" width="50"></el-table-column>
        <el-table-column align="center" :label="$t('订单来源')" prop="orderSource">
          <template slot-scope="scope">
           {{ order_SourceMap[scope.row.orderSource] }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('订单类型')" prop="orderType">
          <template slot-scope="scope">
            {{ orderTypeMap[scope.row.type] }}
          </template>
        </el-table-column>
        <el-table-column align="center" width="200" :label="$t('订单编号')" prop="orderSn" >
          <template slot-scope="scope">
          <el-tag :style="{'width':'150px'}" effect="dark">  {{ scope.row.orderSn?scope.row.orderSn:'非订单类型明细' }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" :label="$t('会员等级')" prop="userLevel">
          <template slot-scope="scope">
            {{ formateLevelMember(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('添加时间')" prop="addTime" />
        <el-table-column align="center" :label="$t('账户余额')" prop="availableAmount" />
        <el-table-column align="center" :label="$t('账户积分')" prop="points" />
        <el-table-column align="center" width="300" :label="$t('备注消息')" prop="message" >
        <template slot-scope="scope">
          {{ scope.row.message?scope.row.message:'无备注消息' }}
        </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('类型')" prop="type">
          <template slot-scope="scope">
            <el-tag :style="{'width':'120px'}" effect="dark" type="success" v-if="scope.row.type == 1" >{{$t('账户充值')}}:${{ scope.row.amount }}</el-tag>
            <el-tag :style="{'width':'120px'}" effect="dark" type="danger" v-if="scope.row.type == 2" >{{$t('账户消费')}}:${{ scope.row.amount }}</el-tag>
            <el-tag :style="{'width':'120px'}" effect="dark" type="danger" v-if="scope.row.type == 8" >{{$t('账户退款')}}:${{ scope.row.amount }}</el-tag>
            <el-tag :style="{'width':'120px'}" effect="dark" type="danger" v-if="scope.row.type == 9" >{{$t('购买订阅')}}:${{ scope.row.amount }}</el-tag>
            <el-tag :style="{'width':'120px'}" effect="dark" type="danger" v-if="scope.row.type == 10" >{{$t('续购订阅')}}:${{ scope.row.amount }}</el-tag>
            <el-tag :style="{'width':'120px'}" effect="dark" type="danger" v-if="scope.row.type == 11" >{{$t('赠送订阅')}}:${{ scope.row.amount }}</el-tag>
            <el-tag :style="{'width':'120px'}" effect="dark" type="danger" v-if="scope.row.type == 12" >{{$t('礼物卡充值')}}:${{ scope.row.amount }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="billTotal > 0" :total="billTotal" :page.sync="listBillQuery.page"
        :limit.sync="listBillQuery.limit" @pagination="getBillList" />
    </el-card>

    <el-card>
      <div slot="header" class="clearfix">
        <span>{{ $t('礼物卡明细') }}</span>
        <!-- <label style="float: right; padding: 3px 0">{{$t('总充值')}}:{{statistics.totalSaving}}</label>
        <label style="float: right; padding: 3px 0">{{$t('总消费')}}:{{statistics.totalConsume}}</label>
        <label style="float: right; padding: 3px 0">{{$t('余额')}}:{{statistics.totalBalance}}</label> -->
        <div style="float:right">
          <el-input style="width:200px" :placeholder="$t('请输入礼物卡卡号')" v-model="listGifeQuery.cardNumber"></el-input>
          <el-button type="primary" @click="getGiftCardDetailList"> {{$t('搜索')}}</el-button>
        </div>
      </div>
      <!-- 查询结果 -->
      <el-table v-loading="giftCardDetailListLoading" :data="giftCardDetailList" :element-loading-text="$t('Searching')" border
                fit highlight-current-row>
        <el-table-column type="index" :index="getGifeIndex" width="50"></el-table-column>
        <el-table-column align="center" :label="$t('卡号')" prop="cardNumber" />
        <!--<el-table-column align="center" :label="$t('订单编号')" prop="orderSn" />-->
        <el-table-column align="center" :label="$t('账户余额')" prop="balance" />
        <el-table-column align="center" :label="$t('消费来源')" prop="orderSource">
          <template slot-scope="scope">
            <el-tag>{{ gifOrderSourceFilter(scope.row.orderSource) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('消费时间')" prop="updateTime" />
<!--        <el-table-column align="center" :label="$t('赠送积分')" prop="changePoints" />-->
        <el-table-column align="center" :label="$t('类型')" prop="type">
          <template slot-scope="scope">
            <el-tag effect="dark" type="success" v-if="scope.row.type == 1" >{{$t('账户充值')}}:${{ scope.row.amount }}</el-tag>
            <el-tag type="danger" v-if="scope.row.type == 2" >{{$t('账户消费')}}:${{ scope.row.amount }}</el-tag>
            <el-tag type="success" v-if="scope.row.type == 3" >{{$t('账户转入')}}:${{ scope.row.amount }}</el-tag>
            <el-tag type="danger" v-if="scope.row.type == 4" >{{$t('账户转出')}}:${{ scope.row.amount }}</el-tag>
            <el-tag type="danger" v-if="scope.row.type == 5" >{{$t('账户赠送')}}:${{ scope.row.amount }}</el-tag>
            <el-tag type="danger" v-if="scope.row.type == 6" >{{$t('账户领取')}}:${{ scope.row.amount }}</el-tag>
            <el-tag type="danger" v-if="scope.row.type == 7" >{{$t('账户销毁')}}:${{ scope.row.amount }}</el-tag>
            <el-tag type="danger" v-if="scope.row.type == 8" >{{$t('账户退款')}}:${{ scope.row.amount }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" width="350" :label="$t('内容')" prop="content" />
        <el-table-column align="center" width="100" :label="$t('赠送积分')" prop="changePoints" >
          <template slot-scope="scope">
            <el-link type="success">
              {{ scope.row.changePoints }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('Operate')" width="120" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-sell" size="mini" @click="handleGiftDetail(scope.row)">{{ $t('Details') }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="giftCardDetailTotal > 0" :total="giftCardDetailTotal" :page.sync="listGifeQuery.page"
        :autoScroll="false" :limit.sync="listGifeQuery.limit" @pagination="getGiftCardDetailList" />
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{ $t('付费会员明细') }}</span>
        <!-- <label style="float: right; padding: 3px 0">{{$t('总充值')}}:{{statistics.totalSaving}}</label>
        <label style="float: right; padding: 3px 0">{{$t('总消费')}}:{{statistics.totalConsume}}</label>
        <label style="float: right; padding: 3px 0">{{$t('余额')}}:{{statistics.totalBalance}}</label> -->
      </div>
      <el-table v-loading="payMemberListLoading" :data="payMemberList" border fit highlight-current-row>
        <el-table-column align="center" type="index" :label='$t("序号")' width="50"></el-table-column>
<!--        <el-table-column align="center" :label="$t('订单编号')" prop="orderSn" />-->
        <el-table-column align="center" :label='$t("会员名称")' prop="memberName" />
        <el-table-column align="center" :label='$t("购买类型")' prop="purchaseType">
          <template slot-scope="scope">
            <span>{{ $t(scope.row.purchaseType == 1 ? '购买' : scope.row.purchaseType == 2 ? '续费' : scope.row.purchaseType
                == 3 ? '赠送' : scope.row.purchaseType)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :label='$t("付款方式")' prop="payType">
          <template slot-scope="scope">
            <span>{{ $t(scope.row.payType == 1 ? '余额' : scope.row.payType == 2 ? '信用卡' : scope.row.payType == 3 ?
                'paypal' : scope.row.payType == 4 ? '积分支付' : '')
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :label='$t("金额")' prop="price">
          <template slot-scope="scope">
            <span>{{ formatePrice(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :label='$t("购买时间")' prop="buyTime" />
      </el-table>
      <pagination v-show="payMemberTotal > 0" :total="payMemberTotal" :page.sync="listPayQuery.page" :autoScroll="false"
        :limit.sync="listPayQuery.limit" @pagination="getPayMember" />
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{$t('订阅明细')}}</span>
        <!-- <label style="float: right; padding: 3px 0">{{$t('总充值')}}:{{statistics.totalSaving}}</label>
        <label style="float: right; padding: 3px 0">{{$t('总消费')}}:{{statistics.totalConsume}}</label>
        <label style="float: right; padding: 3px 0">{{$t('余额')}}:{{statistics.totalBalance}}</label> -->
      </div>
      <el-table v-loading="subscriListLoading" :data="subscriList" :element-loading-text="$t('Searching')" border fit
        highlight-current-row>
        <el-table-column align="center" :label="$t('订阅名称')" prop="subscribeName">
        </el-table-column>
        <el-table-column align="center" :label="$t('购买类型')" prop="buyType">
          <template slot-scope="scope">
            {{ filterBuyType(scope.row.buyType) }}
          </template>
        </el-table-column>
        <!--订单类型(1:自提；2：外送;3:堂食；4：邮寄)-->
        <el-table-column align="center" :label="$t('金额')" prop="price">
          <template slot-scope="scope">
            {{ filterPrice(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('购买时间')" prop="buyTime">
        </el-table-column>
        <el-table-column align="center" :label="$t('付款方式')" prop="payType">
          <template slot-scope="scope">
            {{ filterPayType(scope.row.payType) }}
          </template>
        </el-table-column>

        <el-table-column align="center" :label="$t('到期时间')" prop="expireTime">
        </el-table-column>
      </el-table>
      <pagination v-show="subscriTotal > 0" :total="subscriTotal" :page.sync="listSubscriQuery.page" :autoScroll="false"
        :limit.sync="listSubscriQuery.limit" @pagination="getSubscri" />
    </el-card>
  </el-card>

    <el-drawer
      title="礼物卡订单详情"
      :visible.sync="giftDrawer"
      direction="rtl">
      <el-descriptions v-if="this.getGiftCardDetail.cardNumber!='------'" :title="$t('卡号')+this.getGiftCardDetail.cardNumber" direction="vertical"  column="2" border>
        <el-descriptions-item label="支付方式">{{this.payTypeMap[this.getGiftCardDetail.payType]}}</el-descriptions-item>
        <el-descriptions-item label="支付状态"> <el-tag size="small">{{giftOrderTypeMap(this.getGiftCardDetail.payStatus)}}</el-tag></el-descriptions-item>
        <el-descriptions-item label="支付时间">{{this.getGiftCardDetail.payTime}}</el-descriptions-item>
        <el-descriptions-item label="最近交易时间">{{this.getGiftCardDetail.updateTime}}</el-descriptions-item>
        <el-descriptions-item label="金额">
          <el-tag type="success" size="small">{{ this.getGiftCardDetail.amount+' $'}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="货币币种" >{{this.getGiftCardDetail.currency}}</el-descriptions-item>
        <el-descriptions-item label="消费门店">{{this.getGiftCardDetail.shopname}}</el-descriptions-item>
        <el-descriptions-item label="消费对象账号">{{this.getGiftCardDetail.addUserName}}</el-descriptions-item>
        <el-descriptions-item label="付款编号">{{this.getGiftCardDetail.payId}}</el-descriptions-item>
        <el-descriptions-item label="第三方付款编号">{{this.getGiftCardDetail.payerId}}</el-descriptions-item>
        <el-descriptions-item label="交易号">{{this.getGiftCardDetail.transationId}}</el-descriptions-item>
        <el-descriptions-item label="悄悄话">{{this.getGiftCardDetail.message}}</el-descriptions-item>
      </el-descriptions>
      <el-empty v-if="this.getGiftCardDetail.cardNumber!='------'" description="礼物卡订单与普通商品下单等不同，该订单是礼物卡独有订单"></el-empty>
      <el-empty v-if="this.getGiftCardDetail.cardNumber==='------'" description="该礼物卡订单没有内容可展示"></el-empty>
    </el-drawer>
  </div>
</template>

<script>

import { userInfo, billStatistics } from '@/api/user'
import { allForPerm } from '@/api/shop'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { userBill, levelMemberList, getPayMemberList, getGiftCardDetail, getSubscriList } from '@/api/user'
import { listOrder, listInMember, userOrderMemberList } from '@/api/order'
import { giftCardUserOrderDetail } from '@/api/gift'
import Link from "../layout/components/Sidebar/Link.vue";
export default {
  name: "userOverview",
  components: {Link, Pagination },
  data() {
    const statusMap = {
      101: this.$t('Unpaid1'),
      102: this.$t('Member_cancelled'),
      103: this.$t('System_cancelled'),
      201: this.$t('Paid'),
      202: this.$t('Apply_for_refund'),
      203: this.$t('Refunded'),
      301: this.$t('Sent_for_delivery'),
      401: this.$t('Member_received'),
      402: this.$t('System_received')
    }

    const payTypeMap = {
      1: this.$t('现金支付'),
      2: this.$t('礼物卡支付'),
      3: this.$t('PayPal支付'),
      4: this.$t('余额支付'),
      5: this.$t('Clover支付'),
      6: this.$t('积分支付')
    }

    const orderSourceMap = {
      1: this.$t('手机APP'),
      2: this.$t('门店下单'),
      3: this.$t('官网商城'),
      4: this.$t('客户订阅')
    }

    const order_SourceMap = {
      1: this.$t('手机APP'),
      2: this.$t('门店下单'),
      3: this.$t('官网商城'),
      4: this.$t('订阅')
    }

    const orderTypeMap = {
      1: this.$t('自提'),
      2: this.$t('配送'),
      3: this.$t('堂食'),
      4: this.$t('外带')
    }

    return {
      //用户礼物卡明细 详情
      getGiftCardDetail:{},
      //用户礼物卡明细 详情开关
      giftDrawer: false,
      statusMap,
      payTypeMap,
      orderSourceMap,
      order_SourceMap,
      orderTypeMap,
      userInfo: {
        user: { avatar: '' },
        addressList: [],
        orders: [],
        billList: []
      },
      listOrderQuery: {
        page: 1,
        limit: 10,
        userId: undefined,
        sort: 'add_time',
        order: 'desc',
        // orderSn: undefined,
      },
      orderList: [],
      orderTotal: 0,
      listOrderLoading: false,

      listBillQuery: {
        page: 1,
        limit: 10,
        userId: undefined,
        sort: 'add_time',
        order: 'desc',
      },
      listGifeQuery: {
        page: 1,
        limit: 10,
        userId: undefined,
        sort: 'add_time',
        order: 'desc',
      },
      listPayQuery: {
        page: 1,
        limit: 10,
        userId: undefined,
        sort: 'add_time',
        order: 'desc',
        cardNumber: undefined,
      },
      listSubscriQuery: {
        page: 1,
        limit: 10,
        userId: undefined,
        sort: 'add_time',
        order: 'desc',
      },
      levelMembers: [],
      billList: [],
      subscriList: [],
      payMemberList: [],
      giftCardDetailList: [],
      giftCardDetailListLoading: false,
      payMemberListLoading: false,
      subscriListLoading: false,
      giftCardDetailTotal: 0,
      billTotal: 0,
      payMemberTotal: 0,
      subscriTotal: 0,
      listBillLoading: false,
      couponCount: 0,
      amount: 0,
      genderDic: ['其他', '男', '女'],
      levelDic: ['普通会员', '白银会员', '黄金会员', '铂金会员', '钻石会员'],
      statistics: {}
    }
  },
  filters: {

  },
  created() {
    allForPerm().then(response => {
      this.shops = response.data.data.list
    })
    const UserId = this.$route.query.id;
    this.listOrderQuery.userId = UserId;
    this.listBillQuery.userId = UserId;
    this.listGifeQuery.userId = UserId;
    this.listPayQuery.userId = UserId;
    this.listSubscriQuery.userId = UserId;
    this.getData();
    this.getOrderList();
    this.getBillList();
    this.getPayMember();
    this.getGiftCardDetailList();
    this.getLevelMember();
    this.getSubscri();
    billStatistics(this.$route.query.id).then(response => {
      this.statistics = response.data.data
    })
  },
  methods: {
    handleGiftDetail(row){
      this.giftDrawer=true
      giftCardUserOrderDetail(row.orderId).then(res=>{
        this.getGiftCardDetail=res.data.data;
      })
    },
    orderTypeFilter(type) {
      return this.orderTypeMap[type]
    },
    orderStatusFilter(status) {
      return this.statusMap[status]
    },
    getLevelMember() {
      var data = {}
      levelMemberList(data).then(res => {
        // console.log('会员等级列表',res.data.data)
        this.levelMembers = res.data.data.list
      }).catch(() => {
        this.levelMembers = []
      })
    },
    payTypeFilter(type) {
      return this.payTypeMap[type] != undefined ? this.payTypeMap[type] : '无'
    },
    orderSourceFilter(source) {
      return this.orderSourceMap[source]
    },
    order_SourceFilter(source) {
      return this.order_SourceMap[source]
    },
    gifOrderSourceFilter(source) {
      return this.orderSourceMap[source]
    },
    formateLevelMember(row) {
      for (let lengthKey in this.levelMembers) {
        if (this.levelMembers[lengthKey].id == row.userLevel) {
          return this.levelMembers[lengthKey].name
        }
      }
    },
    getData() {
      userInfo(this.$route.query.id).then(response => {
        this.userInfo = response.data.data
        if (this.userInfo.orders && this.userInfo.orders.length > 0) {
          this.userInfo.orders.forEach(order => {
            order.username = this.userInfo.user.username
            this.amount += order.orderPrice
          })
        }
        this.amount = parseFloat(this.amount).toFixed(2)
      })
    },
    getShopName(shopId) {
      if (this.shops) {
        let shop = this.shops.find(shop => {
          if (shop.id == shopId) {
            return true
          }
        })
        if (shop) {
          return shop.name
        }
      }
    },
    handleDetail(row) {
      this.$router.push({ path: '/order/detail', query: { id: row.id } })
    },
    getBillList() {
      userBill(this.listBillQuery).then(response => {
        this.billList = response.data.data.list
        this.billTotal = response.data.data.total
        this.listBillLoading = false
      }).catch(() => {
        this.billList = []
        this.billTotal = 0
        this.listBillLoading = false
      })
    },
    getPayMember() {
      getPayMemberList(this.listPayQuery).then(res => {
        const records = res.data.data;
        this.payMemberList = records.content;
        this.payMemberTotal = records.totalElements;
        this.payMemberListLoading = false;
      }).catch(() => {
        this.payMemberList = [];
        this.payMemberTotal = 0;
        this.payMemberListLoading = false;
      })
    },
    getSubscri() {
      getSubscriList(this.listSubscriQuery).then(res => {
        const records = res.data.data;
        this.subscriList = records.content;
        this.subscriTotal = records.totalElements;
        this.subscriListLoading = false;
      }).catch(() => {
        this.subscriList = [];
        this.subscriTotal = 0;
        this.subscriListLoading = false;
      })
    },
    getGiftCardDetailList() {
      this.giftCardDetailListLoading = true;
      getGiftCardDetail(this.listGifeQuery).then(res => {
        const records = res.data.data;
        this.giftCardDetailList = records.content;
        this.giftCardDetailTotal = records.totalElements;
        this.giftCardDetailListLoading = false;
      }).catch(() => {
        this.giftCardDetailList = [];
        this.giftCardDetailTotal = 0;
        this.giftCardDetailListLoading = false;
      })
    },
    getOrderList() {
      userOrderMemberList(this.listOrderQuery).then(response => {
        const res = response.data.data;
        this.orderList = res.list;
        this.orderTotal = res.total;
        this.listOrderLoading = false
      }).catch(() => {
        this.orderList = []
        this.orderTotal = 0
        this.listOrderLoading = false
      })
    },
    getOrderIndex(index) {
      return (index + 1) + (this.listOrderQuery.page - 1) * this.listOrderQuery.limit;
    },
    getBillIndex(index) {
      return (index + 1) + (this.listBillQuery.page - 1) * this.listBillQuery.limit;
    },
    getGifeIndex(index) {
      return (index + 1) + (this.listGifeQuery.page - 1) * this.listGifeQuery.limit;
    },
    getPayIndex(index) {
      return (index + 1) + (this.listPayQuery.page - 1) * this.listPayQuery.limit;
    },
    formatePrice(row) {
      if (row.payType != 4) {
        return this.$t("$" + row.price)
      } else {
        return this.$t(row.point + "pts")
      }
    },
    filterBuyType(buyType) {
      if (buyType == 1) {
        return this.$t('购买')
      } else if (buyType == 2) {
        return this.$t('续费')
      } else {
        return this.$t('赠送')
      }
    },
    filterPrice(row) {
      if (row.payType == 3) {
        return row.point + 'pts'
      } else {
        return '$' + row.price
      }
    },
    filterPayType(payType) {
      if (payType == 1) {
        return this.$t('余额')
      } else if (payType == 2) {
        return this.$t('礼物卡')
      } else if (payType == 3) {
        return this.$t('积分')
      } else if (payType == 4) {
        return this.$t('信用卡')
      }
    },
    giftOrderTypeMap (payType){
      switch (payType){
        case 1:return this.$t('进行中');
        case 2:return this.$t('已完成');
        case 3:return this.$t('已退款');
        case 4:return this.$t('自动取消');
        default: return this.$t('未知');
      }
    }
  }
}
</script>


<style scoped>
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #F2F6FC;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>

